<template>
    <Layout title="采购订单新建">
        <van-form @submit="submitEvt">
            <p class="my-title">基础信息</p>
            <van-cell-group inset>
                <van-field v-model="submitObj.createName"
                    name="userName"
                    label="创建人"
                    readonly/>
                <van-field v-model="submitObj.createTime"
                    name="createTime"
                    label="创建时间"
                    placeholder="选择创建时间"
                    readonly
                    :rules="[{ required: true, message: '选择创建时间' }]">
                    <template #button>
                        <van-button size="small" @click="showTime = true" type="primary">选择时间</van-button>
                    </template>
                </van-field>
                <van-field v-model="submitObj.projectName"
                    name="projectName"
                    label="项目名字"
                    placeholder="选择项目名字"
                    readonly
                    :rules="[{ required: true, message: '选择项目名字' }]">
                    <template #button>
                        <van-button size="small" @click="showProject = true" type="primary">选择项目</van-button>
                    </template>
                </van-field>
            </van-cell-group>
            <p class="my-title">材料信息</p>
            <van-cell-group inset>
                <van-field v-model="submitObj.materialName"
                    name="materialName"
                    label="材料名称"
                    placeholder="选择材料名称"
                    readonly
                    :rules="[{ required: true, message: '选择材料名称' }]">
                    <template #button>
                        <van-button size="small" type="primary">选择材料</van-button>
                    </template>
                </van-field>
                <van-field v-model="submitObj.materialWeight"
                    name="materialWeight"
                    label="采购数量"
                    placeholder="输入采购数量"
                    :rules="[{ required: true, message: '请输入采购数量' }]"/>
                <van-field v-model="submitObj.materialUnit"
                    name="materialUnit"
                    label="计量单位"
                    is-link
                    readonly
                    @click="showUnit = true"
                    placeholder="输入计量单位"
                    :rules="[{ required: true, message: '请输入计量单位' }]"/>
                <van-field v-model="submitObj.price"
                    name="price"
                    label="采购单价"
                    placeholder="输入采购单价"
                    :rules="[{ required: true, message: '请输入采购单价' }]"/>
            </van-cell-group>
            <p class="my-title">供应商信息</p>
            <van-cell-group inset>
                <van-field v-model="submitObj.supplierName"
                    name="supplierName"
                    label="名称"
                    placeholder="选择名称"
                    readonly
                    :rules="[{ required: true, message: '选择名称' }]">
                    <template #button>
                        <van-button size="small" type="primary">选择供应商</van-button>
                    </template>
                </van-field>
                <van-field v-model="submitObj.supplierContact"
                    name="supplierContact"
                    label="联系人"
                    placeholder="输入联系人"
                    :rules="[{ required: true, message: '请输入联系人' }]"/>
                <van-field v-model="submitObj.supplierPhone"
                    name="supplierPhone"
                    label="联系电话"
                    placeholder="输入联系电话"
                    :rules="[{ required: true, message: '请输入联系电话' }]"/>
            </van-cell-group>
            <p class="my-title">审批信息</p>
            <van-cell-group inset>
                <van-field v-model="submitObj.nextId"
                    name="nextId"
                    label="审批人"
                    placeholder="选择审批人"
                    readonly
                    :rules="[{ required: true, message: '选择审批人' }]">
                    <template #button>
                        <van-button size="small" type="primary">选择审批人</van-button>
                    </template>
                </van-field>
                <van-field v-model="submitObj.remark"
                    name="remark"
                    label="备注"
                    placeholder="输入备注信息"
                    :rules="[{ required: true, message: '请输入备注信息' }]"/>
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                    提交
                </van-button>
            </div>
        </van-form>

        <!-- 材料单位选择器 -->
        <van-popup v-model:show="showUnit" position="bottom">
            <van-picker :columns="unitOptions"
                @confirm="unitPickerEvt"
                @cancel="showUnit = false"/>
        </van-popup>

        <!-- 日期选择器 -->
        <van-calendar v-model:show="showTime" @confirm="timePickerEvt" />

        <!-- 项目列表弹出框 -->
        <van-popup v-model:show="showProject" style="height: 80%;" position="bottom">
            <ul>
                <li v-for="it in options.project" @click="projectPickerEvt(it)" :key="it.id">
                    <!-- 如果是被选中以后那么样式要设置为active，否则没有选中 -->
                    {{it.name}} <i :class="['icon', it.active && 'active']"></i>
                </li>
            </ul>
        </van-popup>
    </Layout>
</template>


<script setup>
    import { onMounted, reactive, ref } from 'vue'
    import { purchaseProjectListApi } from '../../apis/purchaseApi'
    import { commonDefinition } from '../../store'

    const userInfo = commonDefinition().getUserInfo
    const submitObj = reactive({
        nextId: '',
        createId: userInfo.id,
        createName: userInfo.name,
        createTime: '',
        projectId: '',
        projectName: '',
        materialId: '',
        materialName: '',
        materialUnit: '',
        materialWeight: '',
        price: '',
        supplierId: '',
        supplierName: '',
        supplierContact: '',
        supplierPhone: '',
        remark: ''
    })
    const unitOptions = ['kg', '吨', '方', '袋', 'g', '箱']
    const showUnit = ref(false)
    const showTime = ref(false)
    const options = reactive({
        project: []
    })
    const showProject = ref(false)

    onMounted(async function() {
        let result = await projectListApi({
            name: '',
            page: 1,
            size: 15
        })
        if (result.code === 200) {
            options.project = result.data.rows
        }
    })

    function submitEvt() {
        console.log(submitObj)
    }

    function timePickerEvt(_time) {
        showTime.value = false
        submitObj.createTime = `${_time.getFullYear()}-${_time.getMonth() + 1}-${_time.getDate()}`
    }

    function unitPickerEvt() {
        console.log(arguments)
    }

    function projectPickerEvt(it) {
        submitObj.projectId = it.id
        submitObj.projectName = it.name
        showProject.value = false
        options.project.forEach(item => {
            item.active = item.id === it.id
        })
    }
</script>

<style lsng="less" scoped>
@import url('../../style/common.less');
.my-title{
    margin-left:10px;
    font-size: 14px;
 
}
.van-button__text{
    background: yellowgreen;
}
/* .buttons{
    background: @b03;
} */
</style>